<template>
    <div class="outer">
        <toppeer></toppeer>
        <div class="choice" ref="choice">

            <router-link to="/NewCar/XinNengYuan" :class="active" @click.native="change">
                <p>新能源</p>
                <span></span>
            </router-link>

            <router-link to="/NewCar/XinChe" :class="active" @click.native="change">
                <p>新车</p>
                <span></span>
            </router-link>

            <router-link to="/NewCar/HaoHuaPinPai" :class="active" @click.native="change">
                <p>豪华品牌</p>
                <span></span>
            </router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import toppeer from "../components/NewCar/topper.vue"
export default {
    data() {
        return {
            active: ""
        }
    },
    components: {
        toppeer
    },
    mounted() {
        console.log(this.$refs.choice.childNodes)
    },
    methods: {
        change(e) {
            for (var i = 0; i < this.$refs.choice.childNodes.length; i++) {
                this.$refs.choice.childNodes[i].classList.remove("act")
            }
            console.log(11)
            console.log(e.target.parentNode.classList)
            e.target.parentNode.classList.add("act")
        }
    }
}
</script>

<style lang="scss" scoped>
.outer {
    height: (667-27-63)px;
    background-color: #F6F7FB;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 10px 10px;
    font-size: 13px;
}

.choice {
    height: 36px;
    display: flex;
    align-items: center;

    a {
        display: block;
        height: 36px;
        display: flex;
        color: black;
        flex-direction: column;
        text-decoration: none;
        align-items: center;



        p {
            height: 20px;
            margin: 0;
            line-height: 20px;
            display: flex;
            align-items: bottom;
            font-weight: 700;
            box-sizing: border-box;
            padding: 0 10px;
        }

        span {
            height: 3px;
            width: 17px;
            background-color: #2E67EC;
            border-radius: 8px;
            display: block;
            margin-top: 4px;
            visibility: hidden;

        }
    }

    .act {
        p {
            font-size: 18px;
            font-weight: 700;
        }

        span {
            visibility: visible;
        }
    }
}
</style>